<template>
  <section id="about" class="py-16 md:py-24 bg-neutral">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row items-center gap-12">
        <!-- 图片区域 - 滚动动画 -->
        <div class="md:w-1/2 scroll-animate">
          <div class="relative">
            <img
              src="https://picsum.photos/id/1070/800/600"
              alt="拍卖现场"
              class="w-full h-auto rounded-xl shadow-xl transition-transform duration-700 hover:scale-[1.02]"
            />
            <!-- 装饰元素 - 脉动动画 -->
            <div
              class="absolute -z-10 top-1/4 -right-6 w-32 h-32 bg-primary/10 rounded-full blur-xl animate-pulse"
            ></div>
          </div>
        </div>

        <!-- 文字内容 - 滚动动画 -->
        <div class="md:w-1/2 scroll-animate">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-primary mb-4">关于艺拍堂</h2>
          <p class="text-gray-600 mb-6">
            艺拍堂成立于2010年，是国内领先的专业艺术品拍卖平台，致力于为全球收藏家和艺术爱好者提供专业、透明、安全的拍卖服务。
          </p>
          <p class="text-gray-600 mb-8">
            我们拥有一支由资深艺术品鉴定专家、拍卖师、法律顾问组成的专业团队，严格把控每一件拍品的真实性和品质，确保拍卖过程的公平公正。
          </p>

          <!-- 优势特点 - 带交错动画 -->
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8">
            <div
              class="flex items-start space-x-3 scroll-animate"
              v-for="(advantage, index) in advantages"
              :key="index"
              :style="{ animationDelay: `${index * 0.15}s` }"
            >
              <div
                class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center text-primary flex-shrink-0 transition-all duration-300 hover:bg-primary hover:text-white"
              >
                <i :class="advantage.icon"></i>
              </div>
              <div>
                <h4 class="font-bold mb-1">{{ advantage.title }}</h4>
                <p class="text-sm text-gray-600">{{ advantage.description }}</p>
              </div>
            </div>
          </div>

          <!-- 按钮 - 悬停动画 -->
          <router-link
            to="/about"
            class="inline-flex items-center bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-md transition-all duration-300 transform hover:scale-105 group"
          >
            了解更多
            <i
              class="fa fa-long-arrow-right ml-2 transition-transform duration-300 group-hover:translate-x-1"
            ></i>
          </router-link>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 优势特点数据
const advantages = ref([
  {
    title: '专业鉴定',
    description: '每件拍品均经过三重专家鉴定',
    icon: 'fa fa-check',
  },
  {
    title: '安全交易',
    description: '资金托管，保障买卖双方权益',
    icon: 'fa fa-lock',
  },
  {
    title: '透明公开',
    description: '拍卖过程全程记录，可追溯',
    icon: 'fa fa-eye',
  },
  {
    title: '优质服务',
    description: '一对一专属顾问，全程服务',
    icon: 'fa fa-headphones',
  },
])

// 滚动动画观察器
const setupScrollAnimations = () => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-in')
          observer.unobserve(entry.target)
        }
      })
    },
    { threshold: 0.1 }
  )

  document.querySelectorAll('.scroll-animate').forEach((el) => {
    observer.observe(el)
  })
}

onMounted(() => {
  setupScrollAnimations()
})
</script>

<style scoped>
/* 滚动动画 */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 脉动动画 */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

.animate-pulse {
  animation: pulse 4s infinite;
}
</style>
